<template>
  <div class="item_con item_message_box pad12">
    <el-input class="item_con_input input_textarea" id="welcomeContent" type="textarea" :rows="4" v-model="form.content" placeholder="请输入欢迎语" maxlength="1000" show-word-limit @input="changeWords" :disabled="props.look" />
    <div v-if="!props.look" class="simple_fn">
      <div class="cus_name" @click="insetName" v-if="!props.isHidden">插入客户昵称</div>
      <div class="sele_text" @click="openUpload('1', true)">选择文本</div>
      <div class="emoj" @click="emojiVisible = !emojiVisible">😊</div>
    </div>
    <el-scrollbar class="upload_list_box" :class="{ upload_height: props.look }">
      <ul class="upload_list">
        <li class="upload_item" v-for="item in newArr" :key="item.id">
          <img class="file_icon" :src="item.cur_icon" alt="" />
          <div class="file_name">{{ item.name }}</div>
          <img v-if="!props.look" class="del_icon" @click="remove(item)" src="@/assets/image/channel/remove_icon.png" />
        </li>
      </ul>
    </el-scrollbar>
    <el-popover v-if="!props.look" popper-class="pop_select_box" placement="top-start" trigger="hover" :width="500">
      <template v-if="Number(9 - newArr.length) > 0" #reference>
        <div class="upload_btn">
          <el-icon><plus /></el-icon>
          <span class="upload_text">添加图片/视频/音频/文件/链接/抽奖/收集表/电商/公众号/小程序</span>
        </div>
      </template>
      <template #default>
        <div class="upload_pop">
          <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="openUpload(item.id)">
            <img class="item_pop_icon" :src="item.icon" alt="" />
            <span class="item_pop_name">{{ item.name }}</span>
          </div>
        </div>
      </template>
    </el-popover>
    <!-- 表情管理 -->
    <div class="emoj_box">
      <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
    </div>
  </div>
  <!-- 素材标签 -->
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  import ZWEmoji from '@/components/ZWEmoji.vue'
  import ZWMatericalLib from '@/components/channelNew/ZWMatericalLib.vue'

  import { getSetionId, getVideoImage, IsNotEmpty, getSuffixIcon, useInsertWelcomeContent } from '@/utils/utils'
  import { ElMessage } from 'element-plus'
  const props = defineProps(['look', 'isHidden'])
  const ZWMatericalLibRef = ref(null)
  const emoji = ref(null)
  const emojiVisible = ref(false)
  const newArr = ref([])
  const emits = defineEmits(['submit'])
  const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '8', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '27', icon: '/static/file/form.png', name: '收集表' },
    { id: '99', icon: '/static/file/shop.png', name: '电商' },
    { id: '15', icon: '/static/file/official.png', name: '公众号' },
    { id: '11', icon: '/static/file/miniApp.png', name: '小程序' }
  ])
  const form = reactive({
    content: ''
  })
  const fileList = ref([])
  const onInsertText = useInsertWelcomeContent('welcomeContent', form, 'content')
  //表情包管理
  const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    // form.content = form.content + emoji
    onInsertText(emoji)
    emojiVisible.value = false
    changeWords()
  }
  //打开上传文件弹框
  const openUpload = (num: string, flag: boolean = false) => {
    if (flag) {
      const showTabs = ['1']
      ZWMatericalLibRef.value.showTabs = showTabs
      ZWMatericalLibRef.value.baseId = num
      ZWMatericalLibRef.value.materVisible = true
    } else {
      const showTabs = ['2', '4', '5', '3', '6', '27', '8', '99', '15', '11']
      ZWMatericalLibRef.value.showTabs = showTabs
      ZWMatericalLibRef.value.localUploadisShow = ['2', '3', '4', '5', '6']
      ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
      if (num == '15') {
        ZWMatericalLibRef.value.multiple = false
      }
      ZWMatericalLibRef.value.existFile = Number(8 - newArr.value.length) //打开对应的基础素材
      ZWMatericalLibRef.value.materVisible = true
    }
  }
  // 插入名字
  const insetName = () => {
    onInsertText('##客户姓名## ')
    changeWords()
  }
  //更改欢迎语
  const changeWords = () => {
    if (fileList.value.length > 0) {
      if (fileList.value[0].type == 0) {
        fileList.value[0] = {
          type: 0,
          content: form.content
        }
      } else {
        fileList.value.unshift({
          type: 0,
          content: form.content
        })
      }
    } else {
      fileList.value.unshift({
        type: 0,
        content: form.content
      })
    }
    emits('submit', fileList.value)
  }
  // 获取选择的信息
  const getMaterlib = (res: any, local: boolean = false) => {
    if (local) {
      let result = []
      if (res.data.length > 0) {
        res.data.forEach((item: any) => {
          item.type = res.type
          item.user_name = '张三'
          result.push(item)
        })
        fileList.value = fileList.value.concat(changeLocalType(result))
      }
    } else if (res instanceof Array) {
      if (res[0].type == 0) {
        let str = ''
        res[0].data.map((item: any) => {
          str += item.content
        })
        onInsertText(str)
        changeWords()
      } else {
        let result = []
        if (res.length > 0) {
          res.forEach((ite) => {
            ite.data.forEach((item: any) => {
              item.type = ite.type
              item.user_name = '张三'
              result.push(item)
            })
          })
        }
        fileList.value = fileList.value.concat(changeType(result))
      }
    }

    newArr.value = fileList.value.filter((item: any) => {
      return item.type != 0
    })
    emits('submit', fileList.value)
  }
  // 转换本地上传的数据
  const changeLocalType = (data: any[]) => {
    console.log(data, "本地数据")
    let result = []
    if (data.length > 0) {
      data.forEach((item: any) => {
        // 图片
        if (item.type == 1) {
          item.cur_icon = '/static/file/pic.png'
          item.absolute_url = item.url
          item.type = 1
        }
        ///视频
        if (item.type == 2) {
          item.cur_icon = '/static/file/mov.png'
          item.type = 2
          item.thumbnail_url = getVideoImage(item.url, 80, 55)
        }
        // 音频
        if (item.type == 4) {
          item.cur_icon = '/static/file/mp3.png'
          item.type = 4
          item.title = item.name
        }
        // 链接
        if (item.type == 3) {
          item.cur_icon = '/static/file/link.png'
          item.name = item.title
          item.type = 3
        }
        // 文件
        if (item.type == 5) {
          item.cur_icon = getSuffixIcon(item.url)
          item.type = 5
          item.title = item.name
        }
        // 电商素材
        if (item.type == 6) {
          item.cur_icon = '/static/file/link.png'
          item.name = item.title
        }
        item.is_local = true
        result.push(item)
      })
    }
    return result
  }
  // 转换选中信息
  const changeType = (data: any[]) => {
    let result = []
    console.log('ewqew')
    if (data.length > 0) {
      data.forEach((item: any) => {
        if (item.type == 10) {
          item.article_detail.slice(0, 8).forEach((ite: any) => {
            result.push({
              type: 10,
              // cur_icon: '/static/file/official.png',
              // name: item.title,
              cur_icon: getArticleTypeName(2, ite),
              name: getArticleTypeName(1, ite) || ite.title,
              id: ite.id
            })
          })
        }
        // 图片
        if (item.type == 1) {
          item.cur_icon = '/static/file/pic.png'
          item.name = item.file_name
          item.type = 1
        }
        // 抽奖
        if (item.type == 6) {
          item.cur_icon = '/static/file/wbgg.png'
          item.name = item.activity_name
          item.type = 6
        }
        ///视频
        if (item.type == 2) {
          item.cur_icon = '/static/file/mov.png'
          item.name = item.file_name
          item.type = 2
        }
        // 音频
        if (item.type == 4) {
          item.cur_icon = '/static/file/mp3.png'
          item.name = item.file_name
          item.type = 4
        }
        // 链接
        // if (item.type == 6 || item.type == 7) {
        if (item.type == 3) {
          item.cur_icon = '/static/file/link.png'
          item.name = item.title
          item.type = 3
        }
        // 电商素材--电商产品
        if (item.type == 7) {
          item.cur_icon = '/static/file/shop.png'
          item.name = item.product_name
        }
        // 收集表
        if (item.type == 9) {
          item.cur_icon = '/static/file/form.png'
          item.name = item.title
        }
        // 电商素材--页面素材
        if (item.type == 8) {
          console.log(item, '页面素材')
          item.cur_icon = '/static/file/shop.png'
          item.name = item.page_name
        }
        // 电商素材--页面素材
        if (item.type == 11) {
          item.cur_icon = '/static/file/miniApp.png'
          item.name = item.title
        }
        // 文件
        if (item.type == 5) {
          item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url)
          item.name = item.mediaFileInfo?.name
          item.type = 5
        }
        if (item.type != 10) {
          result.push(item)
        }
      })
    }
    return result
  }
  // 删除上传的文件
  const remove = (data: any) => {
    if (data.code) {
      fileList.value = fileList.value.filter((item: any) => item.code != data.code)
      newArr.value = newArr.value.filter((item: any) => item.code != data.code)
    } else {
      fileList.value = fileList.value.filter((item: any) => item.id != data.id)
      newArr.value = newArr.value.filter((item: any) => item.id != data.id)
    }
    emits('submit', fileList.value)
  }

  /**
   * 1-图文 2-文字 3-视频 4-音频 5-图片
   * @param {*} type 1-name 2-imgUrl
   * @param {*} articleType
   */
  const getArticleTypeName = (type: Number, article: any) => {
    let articleType = article.type
    let list = [
      { name: '', code: 1, iconUrl: '/static/file/official.png' },
      { name: '', code: 2, iconUrl: '/static/file/text.png' },
      { name: '视频', code: 3, iconUrl: '/static/file/mov.png' },
      { name: '音频', code: 4, iconUrl: '/static/file/mp3.png' },
      { name: '图片', code: 5, iconUrl: '/static/file/pic.png' }
    ]
    let info: any = list.find((el) => el.code == articleType) || {}
    if (type == 1) {
      return info.name
    } else if (type == 2) {
      if (articleType == 1) {
        return article.cover
      } else {
        return info.iconUrl
      }
    }
  }

  defineExpose({
    fileList,
    newArr,
    form
  })
</script>
<style lang="scss" scoped>
  .item_con {
    .radio_group {
      margin-right: 15px;
    }
    .cus_type_0 {
      margin-top: 20px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #33302d;
      span {
        color: #ff6b00;
      }
    }
    .form_cus_type {
      margin-top: 5px;
      .el-form-item__content {
        .form_item_input {
          .el-input__inner {
            width: 253px !important;
          }
        }
      }
    }
    .input_textarea {
      width: 100%;
      :deep(.el-textarea__inner) {
        height: 170px;
        background: #f8f8f8;
        border: 0;
        box-shadow: none;
        border-bottom: 1px solid #eaeaea;
        padding: 5px 0;
      }
    }
  }
  .item_message_box {
    background: #f8f8f8;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    width: 580px;
    height: 380px;
    position: relative;
    .simple_fn {
      margin-top: 5px;

      display: flex;
      align-items: center;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #33302d;
      padding-bottom: 6px;
      border-bottom: 1px solid #eaeaea;
      .cus_name {
        margin-right: 18px;
        color: #ff6b00;
        cursor: pointer;
      }
      .emoj {
        margin-left: 5px;
        cursor: pointer;
      }
      .sele_text {
        cursor: pointer;
      }
    }
    .upload_list_box {
      overflow: hidden;
      height: 140px;
    }
    .upload_height {
      margin-top: 10px;
      height: 200px;
    }
    .upload_list {
      .upload_item {
        margin-top: 5px;
        width: 440px;
        height: 32px;
        box-sizing: border-box;
        background: #eaeaea;
        display: flex;
        padding: 0px 10px 0px 14px;
        align-items: center;
        .file_icon {
          width: 20px;
          height: 20px;
          margin-right: 7px;
        }
        .file_name {
          width: 375px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .del_icon {
          width: 10px;
          height: 10px;
          cursor: pointer;
        }
      }
    }
    .upload_btn {
      margin-top: 8px;
      width: 460px;
      height: 32px;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
      padding: 0 12px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      color: #969696;
      .upload_text {
        margin-left: 8px;
      }
    }
    .upload_pop {
      position: absolute;
      bottom: 50px;
      left: -20px;
      width: 360px;
      height: 84px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item_pop {
        width: 60px;
        height: 62px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        .item_pop_icon {
          width: 40px;
        }
        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
        }
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translate(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff;
      }
    }
    .emoj_box {
      width: 270px;
      position: absolute;
      top: -40px;
    }
  }
  .pad12 {
    padding: 12px;
  }
  .pop_select_box {
    height: 84px;
    .upload_btn {
      margin-top: 8px;
    }
    .upload_pop {
      background: #ffffff;
      border-radius: 12px;
      // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item_pop {
        width: 60px;
        height: 62px;
        display: flex;
        border-radius: 6px;
        border: 1px solid #f9f9f9;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        .item_pop_icon {
          width: 38px;
        }
        .item_pop_name {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
          white-space: nowrap;
        }
      }
    }
  }
</style>
